<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useTokenStore } from '@/stores/token.js'
import { userLoginService, getCheckCodeService } from '@/api/user.js'
import { ElMessage } from 'element-plus'
import { User, Lock, Key } from '@element-plus/icons-vue'

const router = useRouter()

const formData = reactive({
    email: '',
    password: '',
    checkCode: ''
})

const rules = {
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 16, message: '密码长度应为6-16位', trigger: 'blur' }
    ],
    checkCode: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        { min: 4, max: 4, message: '验证码长度应为4位', trigger: 'blur' }
    ]
}

const formRef = ref()
const checkCodeImg = ref('')
const rememberMe = ref(false)
const loading = ref(false)

const getCheckCode = async () => {
    try {
        const res = await getCheckCodeService()
        checkCodeImg.value = res.data
    } catch (error) {
        ElMessage.error('获取验证码失败')
    }
}
getCheckCode()

const login = async () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            try {
                loading.value = true
                let data = await userLoginService(formData)
                ElMessage.success(data.msg ? data.msg : '登录成功')
                router.push('/main/all')
                const tokenStore = useTokenStore()
                tokenStore.setToken(data.data)
            } catch (error) {
                ElMessage.error(error.message || '登录失败')
                // 重置表单
                formRef.value.resetFields()
                // 刷新验证码
                getCheckCode()
            } finally {
                loading.value = false
            }
        } else {
            ElMessage.error('请检查输入信息是否正确')
        }
    })
}

const qqLogin = () => {
    window.location.href = 'https://qq.wch666.com/api/qq.php?token=a1d3d3d7c0b2bb72caa13d9e3863676b'
}

const goToRegister = () => {
    router.push('/register')
}

const goToForgetPassword = () => {
    router.push('/forget-password')
}
</script>

<template>
    <div class="login-container">
        <div class="bg-effects"></div>

        <div class="login-box">
            <div class="brand">
                <div class="logo">云忆匣</div>
                <div class="subtitle">留住每一份珍贵的记忆</div>
            </div>

            <el-form :model="formData" :rules="rules" ref="formRef" class="login-form" label-position="top">
                <el-form-item prop="email" label="邮箱">
                    <el-input v-model="formData.email" placeholder="请输入邮箱">
                        <template #prefix>
                            <el-icon>
                                <User />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item prop="password" label="密码">
                    <el-input v-model="formData.password" type="password" placeholder="请输入密码" show-password>
                        <template #prefix>
                            <el-icon>
                                <Lock />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item prop="checkCode" label="验证码">
                    <div class="check-code-container">
                        <el-input v-model="formData.checkCode" placeholder="请输入验证码">
                            <template #prefix>
                                <el-icon>
                                    <Key />
                                </el-icon>
                            </template>
                        </el-input>
                        <img :src="checkCodeImg" alt="验证码" class="check-code-img" @click="getCheckCode"
                            title="点击刷新验证码" />
                    </div>
                </el-form-item>

                <div class="remember-forgot">
                    <el-checkbox v-model="rememberMe">记住我</el-checkbox>
                    <a href="javascript:void(0)" class="forgot-password" @click="goToForgetPassword">忘记密码?</a>
                </div>

                <el-form-item>
                    <el-button type="primary" class="login-button" @click="login" :loading="loading" round>
                        登录
                    </el-button>
                </el-form-item>

                <div class="other-login">
                    <div class="divider">
                        <span>其他登录方式</span>
                    </div>
                    <div class="social-login">
                        <el-tooltip content="QQ登录" placement="top">
                            <div class="qq-login" @click="qqLogin">
                                <i class="fab fa-qq"></i>
                            </div>
                        </el-tooltip>
                    </div>
                </div>

                <div class="register-link">
                    没有账号? <a href="javascript:void(0)" @click="goToRegister">立即注册</a>
                </div>
            </el-form>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.login-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    background: linear-gradient(135deg, #56ccf2 0%, #2f80ed 100%);

    .bg-effects {
        position: absolute;
        inset: -20vmax;
        pointer-events: none;

        &::before,
        &::after {
            content: '';
            position: absolute;
            width: 60vmax;
            height: 60vmax;
            border-radius: 50%;
            filter: blur(60px);
            mix-blend-mode: screen;
            opacity: 0.45;
            animation: float 18s ease-in-out infinite;
        }

        &::before {
            left: -10vmax;
            top: -8vmax;
            background: radial-gradient(closest-side, #a0c4ff, transparent 70%);
        }

        &::after {
            right: -8vmax;
            bottom: -6vmax;
            animation-delay: 3.5s;
            background: radial-gradient(closest-side, #ffd6a5, transparent 70%);
        }
    }
}

.login-box {
    width: 440px;
    padding: 36px 34px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow:
        0 20px 40px rgba(31, 67, 116, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transform: translateY(6px);
    animation: enter 600ms cubic-bezier(.2, .9, .2, 1) forwards;

    .brand {
        text-align: center;
        margin-bottom: 22px;

        .logo {
            font-size: 30px;
            font-weight: 800;
            letter-spacing: 2px;
            background: linear-gradient(90deg, #ffffff, #e9f3ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
        }

        .subtitle {
            margin-top: 8px;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.9);
            opacity: 0.9;
        }
    }

    .login-form {
        :deep(.el-form-item) {
            margin-bottom: 18px;
        }

        :deep(.el-form-item__label) {
            color: rgba(255, 255, 255, 0.95);
            font-weight: 600;
            letter-spacing: 0.2px;
        }

        :deep(.el-input__wrapper) {
            border-radius: 12px;
            padding: 4px 10px;
            background: rgba(255, 255, 255, 0.75);
            border: 1px solid rgba(255, 255, 255, 0.45);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.6),
                0 1px 2px rgba(16, 24, 40, 0.06);
            transition: all .2s ease;
        }

        :deep(.el-input__wrapper:hover) {
            border-color: rgba(47, 128, 237, 0.7);
        }

        :deep(.el-input__wrapper.is-focus),
        :deep(.el-input__wrapper:focus-within) {
            border-color: #2f80ed;
            box-shadow:
                0 0 0 3px rgba(47, 128, 237, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
            background: rgba(255, 255, 255, 0.9);
        }

        :deep(.el-input__prefix) {
            color: #2f80ed;
        }

        .check-code-container {
            display: flex;
            align-items: center;
            gap: 12px;

            .check-code-img {
                height: 44px;
                min-width: 112px;
                border-radius: 10px;
                border: 1px solid rgba(255, 255, 255, 0.55);
                background: rgba(255, 255, 255, 0.85);
                box-shadow: 0 4px 10px rgba(31, 67, 116, 0.15);
                cursor: pointer;
                transition: transform .2s, box-shadow .2s;
            }

            .check-code-img:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 16px rgba(31, 67, 116, 0.22);
            }
        }

        .remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 6px 0 14px;

            :deep(.el-checkbox__label) {
                color: rgba(255, 255, 255, 0.95);
                font-weight: 500;
            }

            .forgot-password {
                color: #fff;
                opacity: 0.9;
                text-decoration: none;
                transition: opacity .2s ease, text-decoration-color .2s ease;
            }

            .forgot-password:hover {
                opacity: 1;
                text-decoration: underline;
                text-decoration-color: rgba(255, 255, 255, 0.9);
            }
        }

        .login-button {
            width: 100%;
            height: 46px;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 0.4px;
            border: 0;
            background: linear-gradient(135deg, #6ddcff 0%, #2f80ed 100%);
            box-shadow:
                0 10px 20px rgba(47, 128, 237, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
            transition: transform .15s ease, box-shadow .15s ease, filter .2s ease;
        }

        .login-button:hover {
            transform: translateY(-1px);
            box-shadow:
                0 14px 26px rgba(47, 128, 237, 0.42),
                inset 0 1px 0 rgba(255, 255, 255, 0.55);
            filter: saturate(1.08);
        }

        .login-button:active {
            transform: translateY(0);
            box-shadow:
                0 8px 16px rgba(47, 128, 237, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
        }

        .other-login {
            margin-top: 8px;

            .divider {
                display: flex;
                align-items: center;
                gap: 12px;
                margin: 14px 0 18px;

                &::before,
                &::after {
                    content: '';
                    flex: 1;
                    height: 1px;
                    background: linear-gradient(to right,
                            rgba(255, 255, 255, 0.0),
                            rgba(255, 255, 255, 0.6),
                            rgba(255, 255, 255, 0.0));
                }

                span {
                    color: rgba(255, 255, 255, 0.9);
                    font-size: 13px;
                }
            }

            .social-login {
                display: flex;
                justify-content: center;

                .qq-login {
                    width: 44px;
                    height: 44px;
                    border-radius: 50%;
                    background: radial-gradient(circle at 30% 30%, #6ddcff, #12b7f5 70%);
                    color: white;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    box-shadow:
                        0 10px 20px rgba(18, 183, 245, 0.35),
                        inset 0 2px 8px rgba(255, 255, 255, 0.5);
                    transition: transform .2s ease, box-shadow .2s ease;
                }

                .qq-login:hover {
                    transform: translateY(-3px);
                    box-shadow:
                        0 16px 28px rgba(18, 183, 245, 0.45),
                        inset 0 3px 10px rgba(255, 255, 255, 0.6);
                }

                i {
                    font-size: 20px;
                }
            }
        }

        .register-link {
            text-align: center;
            margin-top: 16px;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.95);

            a {
                color: #ffffff;
                text-decoration: none;
                border-bottom: 1px dashed rgba(255, 255, 255, 0.7);
                padding-bottom: 1px;
                transition: opacity .2s ease;
            }

            a:hover {
                opacity: 0.9;
            }
        }
    }
}

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(6vmin, -4vmin) scale(1.05);
    }
}

@keyframes enter {
    to {
        transform: translateY(0);
    }
}

/* 响应式 */
@media (max-width: 768px) {
    .login-box {
        width: 92% !important;
        padding: 26px 20px !important;
    }
}
</style>